<template>
    <div class="content-view">
        <div id="right-CAD" class="right-CAD"></div>

        <!-- <div class="test_div">
      <div @click="setSelectedMarkup('1')">select_pos_order 1</div>
      <div @click="setSelectedMarkup('2')">select_pos_order 2</div>
      <div @click="setSelectedMarkup('3')">select_pos_order 3</div>
      <div @click="setSelectedMarkup('4')">select_pos_order 4</div>

    </div> -->
    </div>
</template>

<script>
import * as svg_opt from "@/utils/svg_opt.js";

import { getSvgData } from "@/api/api";
import testBall from "@/utils/testdata/test_ball.js";
import { showLoading, hideLoading } from "@/utils/loading";
import eventBus from "@/eventBus/bus";
import { getLocalStorage } from "@/utils/storage";
import $ from "jquery";
// 导出模块
export default {
    // 模块名字
    name: "CadViewForBH",

    // 模块数据

    props: {
        machineId: String,
        isShow: Boolean,
    },
    //     props: {
    //     isAble: Boolean,
    //     leftToolFalg: Boolean,
    //   },

    data() {
        //数据
        return {
            svgSourceUrl: "",
            sourceExt: "",
            sourceUrl: "",
            isSourcePic: false,

            isSvgLoaded: false,
            testSvgIndex: 2,

            dmgCode: -1,
            corrCode: "206",
            blnCorrCode: "",
            selectDate: "",
            pltCode: "",

            macNumb: "",
            pltName: "",
            macType: "",
            areaOption: "",
            markupsPosList: [],

            loadSvgWhenReShow: false,

            posCode: "",
            corrJudg: "",
        };
    },

    watch: {
        isShow(val) {
            if (this.loadSvgWhenReShow && val) {
                this.loadSvg();
                this.loadSvgWhenReShow = false;
            }
        },
    },

    methods: {
        loadSvgDataByRow(
            inDmgCode,
            inCorrCodeUp, // 颜色筛选？
            inCorrCodeDown, // 颜色筛选？

            inSelectDate, // 日期
            inPltCode, // pltcode

            inMacNumb,
            inPltName,
            inMacType,
            loadSvgWhenReShow,
            checkArea,

            inCorrJudg,
            inPosCode,

            Type = 2
        ) {
            try {
                $('#right-CAD').html('')
            } catch (error) {
                //
            }
            // if (
            //     inDmgCode == null ||
            //     inCorrCodeUp == null ||
            //     inCorrCodeDown == null ||
            //     inSelectDate == null ||
            //     inPltCode == null
            // ) {
            //     svg_opt.removeSvg();
            //     return;
            // }
            console.log('inCorrCodeDown', inCorrCodeDown);
            this.macNumb = inMacNumb;
            this.pltName = inPltName;
            this.macType = inMacType;

            this.dmgCode = inDmgCode;
            this.corrCode = inCorrCodeUp || '206';
            this.blnCorrCode = inCorrCodeDown;

            this.selectDate = inSelectDate;
            this.pltCode = inPltCode;
            this.areaOption = checkArea;
            this.loadSvgWhenReShow = loadSvgWhenReShow;

            this.posCode = inPosCode;
            this.corrJudg = inCorrJudg;
            // debugger
            this.reloadMachineDrawing(Type);
        },

        reloadMachineDrawing(Type) {
            let data = {
                DmgCode: this.dmgCode == 0 ? 18771 : this.dmgCode,
                CorrCode: this.corrCode || '206',
                BlnCorrCode: this.blnCorrCode,
                SelectDate: this.selectDate,
                PltCode: this.pltCode,
                Option: this.areaOption,
                // pltName: this.pltName,
                // macNumb: this.macNumb,
                //        dmgCode: this.dmgCode,
                // macType: this.macType,
                PosCode: this.posCode,
                CorrJudg: this.corrJudg == 'ALL' ? '' : this.corrJudg,
                Account: getLocalStorage("userName"),
                Type
            };

            getSvgData(data).then((res) => {
                console.log("res---", res);
                if (res.data.code == -310) {
                    try {
                        svg_opt.removeSvg();
                        setTimeout(() => {
                            this.$emit('changeWait', true); // 通知上层加载完毕
                        }, 1500);
                    } catch (error) {

                    }
                    return
                }
                if (!res || res.data.code != 0) {
                    try {
                        setTimeout(() => {
                            this.$emit('changeWait', true); // 通知上层加载完毕
                        }, 1500);
                    } catch (error) {

                    }
                    // this.$alert(this.$t("message.cadViewer.loadSvgFileError"), '', {
                    //     confirmButtonText: 'OK',
                    //     type: 'warning',
                    // });

                    return;
                }
                this.svgSourceUrl = "";
                let dataJson = res.data.data;

                if (dataJson.length > 0) {
                    let item = dataJson[0];
                    console.log(item.drW_PASS);
                    // this.svgSourceUrl = item.drW_PASS;
                    let inSourceUrl = item.drW_PASS;
                    let originExt = item.origiN_FILEEXT;

                    this.markupsPosList = this.genBallMarkupsList(dataJson);

                    let num = inSourceUrl.lastIndexOf(".") + 1;
                    this.sourceExt = inSourceUrl.substring(num);
                    this.sourceUrl = inSourceUrl;

                    let EXT = this.sourceExt
                    if (
                        EXT == "png" ||
                        EXT == "jpg" ||
                        EXT == "gif" ||
                        EXT == "bmp" ||
                        EXT == "jpeg" ||
                        EXT == "tif" ||
                        EXT == "tiff"
                    ) {
                        this.isSourcePic = true;
                        this.svgSourceUrl = require("@/assets/model/method-draw-image.svg");
                    } else {
                        this.isSourcePic = false;
                        this.svgSourceUrl = inSourceUrl;
                    }

                    if (!this.loadSvgWhenReShow) this.loadSvg(originExt);
                }
            });
        },

        async loadSvg(originExt) {
            console.log(this.svgSourceUrl, "this.svgSourceUrl");
            if (!this.svgSourceUrl || this.svgSourceUrl == "") {
                svg_opt.removeSvg();
                return;
            }

            showLoading();
            svg_opt.setSvgLineWidthRatio(1.5);
            svg_opt.setSvgBoundingBoxRatio(0, 10, 0.9);
            svg_opt.setCanClickSelectMarkup(true);
            svg_opt.setCanEditSelectMarkup(false);
            svg_opt.setCanFitPositionAndScale(true);
            svg_opt.setEditDotWidthRatio(3);
            svg_opt.setSelectCallBack(this.updateWhenMarkupSelected);
            svg_opt.AddSvg(
                this.svgSourceUrl,
                "right-CAD",
                this.onSvgMousePosChange,
                false,
                0,
                0,
                originExt == "wmf" ? 1 : -1
            );
            svg_opt.SetSvgMouseMode(0);
            svg_opt.setLoadCallBack(this.onSvgLoaded);
            try {
                setTimeout(() => {
                    this.$emit('changeWait', true); // 通知上层加载完毕
                }, 1500);
            } catch (error) {

            }
        },

        onSvgLoaded(error) {
            hideLoading();

            if (error) {
                console.log(error);
                return;
            }
            this.isSvgLoaded = true;

            if (this.isSourcePic) {
                svg_opt.changeSvgElementData({
                    tagName: "img-content",
                    paramName: "xlink:href",
                    newValue: this.sourceUrl,
                });
            }

            svg_opt.genMarkupOrignDataFromExternalData(this.markupsPosList);
        },

        onTestSelectClick(val) {
            svg_opt.changeSelectStatusById(val);
        },

        genBallMarkupsList(originData) {
            var reList = [];
            for (var i = 0; i < originData.length; i++) {
                let orignItem = originData[i];
                if (orignItem.poS_ORDR == null) continue;

                let temp = {};
                temp.sId = orignItem.poS_ORDR;
                temp.shapeType = Number(orignItem.blN_TYPE) + 12;
                temp.showType = "trans";
                temp.showID = orignItem.poS_ORDR;
                temp.lineColor = "#0000FF";
                temp.lineWidth = "5";
                temp.fontSize = orignItem.blN_FNTSIZ;
                temp.fontName = orignItem.blN_FNTNAM;
                temp.lineStyle = "0";
                temp.points = orignItem.thckBlnPoints;
                temp.IdName = `${orignItem.num}-${orignItem.name}`
                if (temp.points[0].blN_COLOR)
                    temp.ballFillColor = temp.points[0].blN_COLOR;
                else temp.ballFillColor = "#ffffff";
                reList.push(temp);

                for (var j = 0; j < orignItem.thckBlnPoints.length; j++) {
                    orignItem.thckBlnPoints[j].x =
                        orignItem.thckBlnPoints[j].blN_X;
                    orignItem.thckBlnPoints[j].y =
                        orignItem.thckBlnPoints[j].blN_Y;
                }
            }
            return reList;
        },

        updateWhenMarkupSelected(e) {
            if (e == null) return;

            console.log("updateWhenMarkupSelected id = ", e);
            svg_opt.changeSelectStatusById(e.IdName);
            this.$emit("onMarkupSelected", e.IdName);
        },

        setSelectedMarkup(e) {
            svg_opt.changeSelectStatusById(e);
        },
        async exportSvgDataStr() {
            let result = ''
            try {
                result = svg_opt.exportSvgDataStr();
            } catch (error) {

            }
            return result
        }
    },

    mounted() {
        // test
        // this.markupsPosList = this.genBallMarkupsList(testBall);
        // if (!this.loadSvgWhenReShow) this.loadSvg();
        // test end
    },
};
</script>

<style lang="scss" scoped>
.content-view {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    background-color: #ffffff;

    .right-CAD {
        width: calc(100%);
        height: calc(100%);
    }
}

.test_div {
    position: absolute;
}
</style>
